<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的视频</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="icon" th:href="@{/pagesResource/img/icon.png}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/animate.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/bootstrap.min.css}">
<!--    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/fontello.css}">-->
<!--    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/fontello-codes.css}">-->
<!--    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/thumbs-embedded.css}">-->
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/iconfont.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/style.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/responsive.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/color.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/boostrapFileInputResources/css/fileinput.min.css}">

    <script src="/js/sweetAlert.js"></script>
    <style >
        td{
            text-align:center;
            vertical-align:middle;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div th:include="main/simpleHeader :: header"></div>
    </div>
    <br>
    <div class="container" style="max-width: 900px;">
        <table id="table"  class="table table-bordered table-striped table-hover">
            <thead>
                <tr>
                    <th>视频ID</th>
                    <th>视频标题</th>
                    <th>封面</th>
                    <th>是否免费</th>
                    <th>是否通过审核</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="videoInfo : ${videoPageInfo.records}">
                    <td th:text="${videoInfo.videoId}"></td>
                    <td th:text="${videoInfo.videoTitle}"></td>
                    <td style="align-content: center">
                        <img style="width:100px;height: 40px;" th:src="@{/video/getVideoCoverageImgById/} + '?videoId=' + ${videoInfo.videoId}" th:alt="${videoInfo.videoTitle}">
                    </td>
                    <td>
                        <button th:if="${videoInfo.isFree}  eq true" class="btn btn-success" style="border-radius: 0px;width:50px;height: 25px;font-size: 10px">免费</button>
                        <button th:if="${videoInfo.isFree} eq false" class="btn btn-danger" style="border-radius: 0px;width:50px;height: 25px;font-size: 10px">收费</button>
                    </td>
                    <td>
                        <button th:if="${videoInfo.isPass}  eq true" class="btn btn-success" style="border-radius: 0px;width:50px;height: 25px;font-size: 10px">通过</button>
                        <button th:if="${videoInfo.isPass} eq false" class="btn btn-danger" style="border-radius: 0px;width:50px;height: 25px;font-size: 10px">未通过</button>
                    </td>
                    <td>
                        <a class="btn btn-info btn-xs" th:onclick="displayVideoById([[${videoInfo.videoId}]],[[${videoInfo.videoURL}]])">查看视频</a> &nbsp;  &nbsp;&nbsp;
                        <a class="btn btn-warning btn-xs" th:onclick="'modifyVideoInfoById('+${videoInfo.videoId}+')'">修改</a> &nbsp;  &nbsp;&nbsp;
                        <a class="btn btn-danger btn-xs" th:onclick="'removeVideoInfoById('+${videoInfo.videoId}+')'">删除</a> &nbsp;  &nbsp;&nbsp;
                    </td>
                </tr>
            </tbody>
        </table>
        <div >
            <div class="center " style="padding-left: 45%;!important;">
                <a th:href="@{/video/myVideoPage(page=${videoPageInfo.current}-1)}"
                   th:class="${videoPageInfo.current == 1}? 'disabled btn btn-primary btn-xs':'btn btn-primary btn-xs'"
                   class="btn btn-primary btn-xs" >上一页</a>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;
                <a th:href="@{/video/myVideoPage(page=${videoPageInfo.current}+1)}"
                   th:class="${videoPageInfo.current == videoPageInfo.pages?'disabled btn btn-primary btn-xs':'btn btn-primary btn-xs'}" class="btn btn-primary btn-xs">下一页</a>
            </div>
        </div>
        <div>
            <div class="center " style="padding-left: 45%;!important;">
                当前第 [[${videoPageInfo.current}]]页,共 [[${videoPageInfo.pages}]] 页.一共 [[${videoPageInfo.total}]] 条记录
            </div>
        </div>
    </div>

    <!-- 查看视频的模态框 -->
    <div class="modal fade" id="videoModel" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="text-align:center;vertical-align:middle;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">查看视频</h4>
                </div>
                <div class="modal-body" style="text-align:center;vertical-align:middle;">
                    <form class="form-horizontal" role="form"  style="text-align:center;vertical-align:middle;">
                        <div class="form-group" style="text-align:center;vertical-align:middle;">
                            <div  class="col-sm-10" style="text-align:center;vertical-align:middle;padding-left: 15%;">    <!-- -->
                                <video style="width: 100%; height: 100%;text-align:center;vertical-align:middle;" id="video" controls>

                                </video>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

<script th:src="@{/boostrapTemplatResources/js/html5shiv.js}"></script>
<script th:src="@{/boostrapTemplatResources/js/respond.min.js}"></script>

<!-- jQuery -->
<script th:src="@{/boostrapTemplatResources/vendor/jquery/jquery.min.js}"></script>

<!-- Bootstrap Core JavaScript -->
<script th:src="@{/boostrapTemplatResources/vendor/bootstrap/js/bootstrap.min.js}"></script>

<!-- Metis Menu Plugin JavaScript -->
<script th:src="@{/boostrapTemplatResources/vendor/metisMenu/metisMenu.min.js}"></script>

<!-- Morris Charts JavaScript -->
<script th:src="@{/boostrapTemplatResources/vendor/raphael/raphael.min.js}"></script>
<script th:src="@{/boostrapTemplatResources/vendor/morrisjs/morris.min.js}"></script>
<script th:src="@{/boostrapTemplatResources/data/morris-data.js}"></script>

<!-- Custom Theme JavaScript -->
<script th:src="@{/boostrapTemplatResources/dist/js/sb-admin-2.js}"></script>
    <script th:src="@{/pagesResource/js/script.js}"></script>
    <script type="text/javascript" th:src="@{/pagesResource/ckplayer/ckplayer.js}" charset="utf-8"
            data-name="ckplayer"></script>
<script type="text/javascript">

    /**
     *
     * 查看视频
     * */
    function displayVideoById(id, videoURL) {
        $("#video")[0].src = "/video/getVideoByVideoURL?videoURL=" + videoURL;
        $("#video")[0].poster = "/video/getVideoCoverageImgById?videoId=" + id;
        $("#videoModel").modal('show');
    }

    $('#videoModel').on('hidden.bs.modal', function () {
        // 执行一些动作...
        $("#video")[0].src = "";
        $("#video")[0].poster = "";
    })

    /**
     * 根据ID删除视频
     */
    function removeVideoInfoById(id) {
        swal({
            title: "删除视频弹框",
            text: "您确定要删除视频吗?",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }).then((flag) => {
            if(flag) {
                $.ajax(
                    {
                        type: "POST",
                        url: "/video/removeVideoInfoById",
                        async: false,   //设置为同步请求
                        cache: true,
                        data: {
                            "videoId": id,
                        },
                        success: function (data) {
                            if(data["removeResult"] == true) {
                                swal("删除成功!", {
                                    buttons: false,
                                    timer: 1000,
                                    icon: "success"
                                });
                                //2秒后刷新页面，足够显示swal()的信息
                                setTimeout(function(){window.location.reload(); },1100);
                            } else {
                                swal("删除失败!", {
                                    buttons: false,
                                    timer: 1000,
                                    icon: "error"
                                });
                            }
                        },
                        error: function (data) {
                            swal("删除失败!", {
                                buttons: false,
                                timer: 1000,
                                icon: "error"
                            });
                        }
                    }
                );
            }
        } );
    }

    /**
     * 跳转到修改视频信息界面
     * @param id
     */
    function modifyVideoInfoById(id) {
        window.location.href = "/video/modifyVideoInfoByIdPage?videoId=" + id;
    }

    /**
     * 个人主页
     * @param userId
     */
    function userMainPage(userId) {
        window.location.href = "/user/userMainPage?userId=" + userId;
    }
</script>
</body>
</html>